import styles from './home.less';
import React from 'react';
import NavLink from 'umi/navlink';
import { Carousel, WingBlank, ActivityIndicator } from 'antd-mobile';
import 'antd-mobile/dist/antd-mobile.css';

export default class Home extends React.Component {
  state = {
    theText: [],
    data: ['1', '2', '3'],
    imgHeight: 176,
    animating: true,
  };

  showToast = () => {
    this.setState({ animating: !this.state.animating });
    this.closeTimer = setTimeout(() => {
      this.setState({ animating: !this.state.animating });
    }, 1000);
    console.log(this.state.theText);
  };
  render() {
    return (
      <div className={styles.box}>
        <div className={styles.command}>
          <WingBlank>
            <Carousel
              autoplay={true}
              infinite
              beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
              afterChange={index => console.log('slide to', index)}
            >
              {this.state.data.map(val => (
                <a
                  key={val}
                  href="https://www.kugou.com/"
                  style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
                >
                  <img
                    src={`${val}`}
                    alt=""
                    style={{ width: '100%', verticalAlign: 'top' }}
                    onLoad={() => {
                      // fire window resize event to change height
                      window.dispatchEvent(new Event('resize'));
                      this.setState({ imgHeight: 'auto' });
                    }}
                  />
                </a>
              ))}
            </Carousel>
          </WingBlank>
        </div>
        <div className={styles.songs}>
          <div className={styles.content}>
            <div>歌曲推荐</div>
            <div className="toast-example">
              <ActivityIndicator toast text="Loading..." animating={this.state.animating} />
            </div>
            <ul>
              {this.state.theText.map((item, index) => {
                return (
                  <NavLink
                    to={`/dynamic-home/$song/${item.song_id}/${item.singer_id}/${item.song_path}`}
                    exact
                    className={styles.list}
                    key={index}
                  >
                    <div className={styles.img}>
                      <img src={item.album_cover} />
                    </div>
                    <div className={styles.box}>
                      <div className={styles.song}>{item.song_name}</div>
                      <div className={styles.name}>{item.singer_name}</div>
                    </div>
                  </NavLink>
                );
              })}
            </ul>
          </div>
        </div>
      </div>
    );
  }

  componentDidMount() {
    fetch('/api/client/commend_songs.json')
      .then(response => response.json())
      .then(data => {
        this.setState({
          theText: data.items[0].songs,
          animating: !this.state.animating,
        });
      });
    setTimeout(() => {
      this.setState({
        data: [
          'http://kwimg4.kuwo.cn/star/upload/60/8/1564149856956_.jpg',
          'http://img1.kwcdn.kuwo.cn/star/upload/10/10/1564165351226_.jpg',
          'http://kwimg2.kuwo.cn/star/upload/35/29/1564149803273_.jpg',
        ],
      });
    }, 3000);
  }
}
